<template>
  <div class="wrapper">
    <label for="example"> Example </label>
    <div>
      <select id="example" v-model="example">
        <option v-for="(name, key) in examples" :value="key">{{ name }}</option>
      </select>
    </div>

    <div style="font-weight: bold; padding: 10px">{{ examples[example] }}</div>
    <vue-finder
      v-if="example === 'default'"
      id="my_vuefinder"
      ref="vuefinderRef"
      :request="request"
      :requestParams="requestParams"
      :max-file-size="maxFileSize"
      :features="features"
      :select-button="handleSelectButton"
    />

    <div v-if="example === 'externalSelect'">
      <vue-finder
        id="my_vuefinder2"
        :request="request"
        :max-file-size="maxFileSize"
        :features="features"
        loadingIndicator="linear"
        @select="handleSelect"
      />

      <button
        class="btn"
        @click="handleButton"
        :disabled="!selectedFiles.length"
      >
        Show Selected ({{ selectedFiles.length ?? 0 }} selected)
      </button>

      <div v-show="selectedFiles.length">
        <h3>Selected Files ({{ selectedFiles.length }} selected)</h3>
        <ul>
          <li v-for="file in selectedFiles" :key="file.path">
            {{ file.path }}
          </li>
        </ul>
      </div>
    </div>

    <vue-finder
      v-if="example === 'contextmenu'"
      id="my_vuefinder3"
      :request="request"
      :max-file-size="maxFileSize"
      :features="features"
      :select-button="handleSelectButton"
      :context-menu-items="customContextMenuItems"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FEATURES, FEATURE_ALL_NAMES } from '../src/features.js'
import { contextMenuItems, SimpleContextMenuItem } from '../src/index.js'
const vuefinderRef = ref(null)
const example = ref('default')
const examples = {
  default: 'Inline select button example',
  externalSelect: 'External select example',
  contextmenu: 'Custom context menu example',
}

const requestParams = {
  project_id: 23,
  employee_id: '',
  enterprise_id: '124827103521669120',
  disabled: false,
  showToggleView: true,
  obs: {},
}
const request = {
  baseUrl: `https://web.yunbuye.cn/test/cms-api/index.php/admin`,
  headers: {
    Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vd2ViLnl1bmJ1eWUuY24vY2hvb3NlLWVudGVycHJpc2UvMTI0ODI3MTAzNTIxNjY5MTIwIiwiaWF0IjoxNzU5ODg3MjEwLCJleHAiOjE3ODU4MDcyMTAsIm5iZiI6MTc1OTg4NzIxMCwianRpIjoiSk5mOVdYcGV2WEk4UkpGOSIsInN1YiI6Ijc2MjQxMzMxMzczOTk4MDgwIiwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyIsImlwIjoiMTkyLjE2OC4xLjYiLCJ1c2VyQWdlbnQiOiJNb3ppbGxhLzUuMCAoV2luZG93cyBOVCAxMC4wOyBXaW42NDsgeDY0KSBBcHBsZVdlYktpdC81MzcuMzYgKEtIVE1MLCBsaWtlIEdlY2tvKSBDaHJvbWUvMTQyLjAuMC4wIFNhZmFyaS81MzcuMzYiLCJ1c2VyX2lkIjoiNzYyNDEzMzEzNzM5OTgwODAiLCJjYWNoZV9rZXkiOiJ0b2tlbl83NjI0MTMzMTM3Mzk5ODA4MCIsImVudGVycHJpc2VfaWQiOiIxMjQ4MjcxMDM1MjE2NjkxMjAifQ.MBesU2Fj7bDkjLhcVVmMJGOmOOblB2Mex57qsFaN3FQ',
  },
  transformRequest: (req) => {
    if (Reflect.has(req.params, 'fetchType') && ['employee', 'department'].includes(req.params.fetchType)) {
      req.url = `https://web.yunbuye.cn/test/oa-api-test/${req.params.fetchType}`
      req.params = {}
    } else if (Reflect.has(req.params, 'fetchType') && !!req.params?.fetchType) {
      if (req.method === 'post') {
        req.url = `https://web.yunbuye.cn/test/cms-api/index.php/admin/microdisk/${req.params.fetchType}`
      } else {
        req.url = `https://web.yunbuye.cn/test/cms-api/index.php/admin/${req.params.fetchType}`
      }
    } else if (req.method === 'get') {
      req.params.project_id = 23
      req.params.enterprise_id = 124827103521669120
      // 首次请求，默认为根目录
      if (!Reflect.has(req.params, 'dir')) {
        req.params = {
          ...req.params,
          dir: 'local://',
          dir_id: 0,
        }
      }
    }
    delete req.params.fetchType
    return req
  },
  xsrfHeaderName: 'X-CSRF-TOKEN',
}

const maxFileSize = ref('500MB')

const features = [
  ...FEATURE_ALL_NAMES,
]

const selectedFiles = ref([])

// an example how to show selected files, outside of vuefinder
// you can create a ref object and assign the items to it,
// then with a button click, you can get the selected items easily
const handleSelect = (selection) => {
  selectedFiles.value = selection
}

const handleButton = () => {
  console.log(selectedFiles.value)
}

const handleSelectButton = {
  // show select button
  active: true,
  // allow multiple selection
  multiple: false,
  // handle click event
  click: (items, event) => {
    if (!items.length) {
      alert('No item selected')
      return
    }
    alert('Selected: ' + items[0].path)
    console.log(items, event)
  },
}

const customContextMenuItems = [
  ...contextMenuItems,
  new SimpleContextMenuItem(
    () => 'Log Info',
    (app, selectedItems) => {
      const info = selectedItems.value.map(
        (i) => `Name: ${i.basename}, Type: ${i.type}, Path: ${i.path}`
      )
      console.log(
        selectedItems.value.length + ' item(s) selected:\n',
        info.join('\n')
      )
      console.log(selectedItems.value)
    },
    undefined,
    {
      target: undefined,
    }
  ),
]
</script>

<style>
body {
  margin: 0;
  background: #eeeeee;
}
.wrapper {
  max-width: 800px;
  margin: 80px auto;
}
.btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  outline: none;
}
</style>
